<template>
	<!-- Tabbar找好物页 -->
	<view class="Jy_home_good_thing_page">
		<!-- 顶部内容 -->
		<view class="Jy_good_ting_top_group" :style="{ 'padding-top': statusBarHeight + 'px' }">
			<view class="Jy_good_ting_top_box">
				<view class="good_thing_icon_box">
					<image src="http://120.78.177.187:8083/crmebimage/public/mpImage/goodthing/bar.png" mode="aspectFit"></image>
				</view>
				<view class="good_thing_title_box">
					<text>满天好物等你来</text>
				</view>
			</view>
		</view>
		
		<!-- 搜索框 -->
		<view class="Jy_good_thing_serach_group">
			<view class="Jy_good_thing_serach_box">
				<view class="icon_box">
					<image src="http://120.78.177.187:8083/crmebimage/public/mpImage/home/serach_icon.png" mode="aspectFit"></image>
				</view>
				<view class="input_box">
					<input type="serach" placeholder="请输入你想要查找的内容" confirm-type="search" v-model="serachVal" @confirm="getSerachConfirm()">
				</view>
			</view>
		</view>
		
		<!-- 分类样式 -->
		<view class="Jy_home_good_classfiy_group">
			<view class="Jy_home_good_classfiy_box">
				<view class="tab_list" v-for="(item, index) in tabList" :key="index">
					<view class="tab_list_box" @click="getTabChange(index)">
						<view :class=" tabIndex == index ? 'tab_text_box_active' : 'tab_text_box'">
							<text>{{item.name}}</text>
							<view class="liner_box">
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 找好物信息列表 -->
		<view class="Jy_good_thing_group" :style="{'height' : 'calc(100vh - 76rpx - 80rpx - 80rpx - ' + statusBarHeight + 'px)'}">
			<view class="Jy_good_thing_box">
				<view class="good-thing-list" v-for="(item,index) in 30" :key="index" @click="getInspirationJournal()">
					<view class="image_box">
						<image src="https://img95.699pic.com/photo/50088/5720.jpg_wh860.jpg" mode="widthFix"></image>
					</view>
					<view class="wz_title_group">
						<view class="wz_title_box">
							<text>这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题这是文章的标题</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 适配头部导航高度
				statusBarHeight: getApp().globalData.statusBarHeight,
				tabList: [
					{
						name: '收藏',
					},
					{
						name: '全部',
					},
					{
						name: '新品等等',
					},
					{
						name: '新品等等',
					},
					{
						name: '新品等等',
					},
					{
						name: '新品等等',
					},
					{
						name: '新品等等',
					},
					{
						name: '新品等等',
					}
				],
				tabIndex: 0,
				// 搜索框内容
				serachVal: ''
			};
		},
		onShow() {
			// 装修灵感步骤跳转传参
			this.getParameter();
		},
		// tabbar 按钮被点击
		onTabItemTap(e){
			// 播放音效
			this.music.play_dede()
		},
		methods: {
			// 头部tab分类切换
			getTabChange(e) {
				this.tabIndex = e;
			},
			getParameter() {
				let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
				let curRoute = routes[routes.length - 1].route //获取当前页面路由
				let curParam = routes[routes.length - 1].options; //获取路由参数
				this.tabIndex = curParam.index;
			},
			// 跳转到装修灵感详情页
			getInspirationJournal() {
				uni.navigateTo({
					url: '/pages/articleDetails/articleDetails'
				})
			},
			// 点击键盘右下角搜索触发
			getSerachConfirm() {
				console.log("serach")
			}
		}
	}
</script>

<style lang="scss" scoped>
@import 'customerGoodThing.scss';
</style>
